<template>
  <div class="clt-main">
    <div
      class="cm-content"
      :class="index == 1 || index == 3 ? 'cm-content1' : ''"
      v-for="(item, index) in cltList"
      :key="index"
    >
      <div class="cm-title">{{ item.firstTitle }}</div>
      <div class="clt-my_wrap" :class="index == 0 || index == 1 ? 'clt-my_wrap1' : ''">
        <div class="clt-module_header">
          <p class="clt-title">{{ item.title }}</p>
        </div>

        <div class="clt-module_content">
          <div class="ci_new">
            <p>
              <span class="cn-title">{{ item.topTitle }}</span>
            </p>
            <p>
              <span class="cn-value">{{ item.value }}</span>
              <span class="cn-unit">{{ item.unit }}</span>
            </p>
          </div>
        </div>

        <div class="clt-module_content">
          <div class="ci_new">
            <p>
              <span class="cn-title">{{ item.leftTitle }}</span>
            </p>
            <p>
              <span class="cn-value">{{ item.leftValue }}</span>
              <span class="cn-unit">{{ item.leftUnit }}</span>
            </p>
          </div>
          <div class="ci_new" v-if="item.rightTitle">
            <p>
              <span class="cn-title">{{ item.rightTitle }}</span
              ><br />
            </p>
            <p>
              <span class="cn-value">{{ item.rightValue }}</span>
              <span class="cn-unit">{{ item.rightUnit }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from '@/utils/request'

export default {
  data() {
    return {
      lj: 26093.48,
      ljkh: 7089,
      ljjybs: 35639,
      timerLjjy: null,
      timerOther: null,
      cltList: [
        {
          firstTitle: '注册商户数',
          title: '',

          topTitle: '累计注册商户数',
          value: null,
          unit: '户',

          leftTitle: '当年新增',
          leftValue: '',
          leftUnit: '户',

          rightTitle: '昨日新增',
          rightValue: '',
          rightUnit: '户',
        },
        {
          firstTitle: '收单流水统计',
          title: '',

          topTitle: '累计收单回流金额',
          value: 0,
          unit: '万元',

          leftTitle: '当年新增',
          leftValue: 0,
          leftUnit: '万元',

          rightTitle: '昨日新增',
          rightValue: 0,
          rightUnit: '万元',
        },

        {
          firstTitle: '活跃商户数',
          title: '',

          topTitle: '活跃商户数',
          value: 0,
          unit: '户',

          leftTitle: '当年新增',
          leftValue: '0',
          leftUnit: '户',

          rightTitle: '昨日新增',
          rightValue: '0',
          rightUnit: '户',
        },

        {
          firstTitle: '资金回流统计',
          title: '',

          topTitle: '日均资金余额',
          unit: '万元',
          value: 0,

          leftTitle: '当年新增',
          leftValue: '0',
          leftUnit: '万元',

          rightTitle: '昨日新增',
          rightValue: '0',
          rightUnit: '万元',
        },
      ],
    }
  },
  props: ['qgData', 'shopNum', 'baseData'],
  mounted() {
    this.queryLeftData()
  },

  methods: {
    async queryLeftData() {
      const res = await http.get('/data/user/count?tenantId=' + process.env.VUE_APP_API_TENANT_ID, {
        isLoading: false,
        baseURL: process.env.VUE_APP_API_ST_URL,
      })

      this.cltList[0]['value'] = res.totalMerchantCount
      this.cltList[0]['leftValue'] = res.thisYearIncrement
      this.cltList[0]['rightValue'] = res.yesterdayIncrement

      this.cltList[2]['value'] = res.totalMerchantCount
      this.cltList[2]['leftValue'] = res.thisYearIncrement
      this.cltList[2]['rightValue'] = res.yesterdayIncrement
    },
    formatDate(date) {
      let d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear()

      if (month.length < 2) month = '0' + month
      if (day.length < 2) day = '0' + day

      return [year, month, day].join('-')
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../right/newOneRight/rightBase.css';

.clt-main {
  position: absolute;
  top: 280px;
  left: 30px;
  width: 1000px;
  overflow: hidden;
  cursor: pointer;
  height: 100%;
  z-index: 999;

  .cm-content {
    width: 490px;
    float: left;
    margin-right: 10px;
    /*margin: 0 30px 30px 118px;*/

    .cm-title {
      /*padding-left: 118px;*/
      width: 100%;
      margin-top: 18px;
      height: 84px;
      float: left;
      color: #fff;
      font-size: 60px;
      margin-bottom: 30px;
    }

    .clt-my_wrap {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      background: url('../../../assets/images/module_bgc.png') no-repeat;
      background-size: 100% 100%;
      position: relative;

      height: 646px;
      float: left;

      .clt-module_content {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        /*flex: 1;*/
        .content_item_wrap {
          position: relative;
          top: -60px;
        }

        .content_num {
          font-size: 100px;
        }

        .content_unit {
          font-size: 50px;
        }

        .ci_new {
          width: 100%;
          float: left;
          font-size: 40px;
          line-height: 28px;
          color: #fff;
          text-align: center;

          p {
            margin: 30px 0;

            .cn-title {
              font-size: 50px;
              line-height: 50px;
              color: #fff;
              margin-bottom: 32px;
            }

            .cn-value {
              font-size: 58px;
              line-height: 90px;
              color: #72abc1;
            }

            .cn-unit {
              font-size: 36px;
              line-height: 36px;
              color: #72abc1;
            }
          }
        }
      }
    }

    .clt-my_wrap1 {
      margin-bottom: 31px;
      margin-top: 3px;
    }
  }

  .cm-content1 {
    /*margin: 0 64px 30px 0;*/
  }

  .clt-module_header {
    width: 100%;
    display: flex;
    height: 19px;
    line-height: 19px;
    align-items: center;
    padding-left: 62px;
    margin: 43px 0 50px 0;
    justify-content: space-between;
  }

  .clt-title {
    font-size: 50px;
    line-height: 50px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    padding-right: 2px;
  }
}
</style>
